<template>
  <div class="info componentBox">
    <h4>{{imageDital.title}}</h4>
    <p>
      <span class="time">发表时间:{{imageDital.add_time | dateFormat}}</span>
      <span class="click">点击:{{imageDital.click}}</span>
    </p>
    <hr />
    <ul>
      <li v-for="(item,id) in ditalImageList" :key="id">
        <van-image :src="item.src" @click="imgPreview(id)" />
      </li>
    </ul>
    <div v-html="imageDital.content" class="detail-content"></div>

    <van-image-preview v-model="imageShow" :images="images" @change="imageOnChange">
      <template v-slot:index>{{ imageIndex+1 }}/{{total}}</template>
    </van-image-preview>

    <!-- 引入评论组件 -->
    <my-comments></my-comments>
  </div>
</template>

<script>
import Comment from '../comment.vue'
export default {
  data() {
    return {
      imageDital: {},
      ditalImageList: [],
      imageShow: false,
      imageIndex: 0,
    }
  },
  created () {
    this.getDitalImage()
    this.getDitalImageList()
    // this.chengeCarNum()
  },
  methods: {
    // 进网页就刷新购物车图标的数量，这个方法需要等到购物车组件完成后在进行编写
    // chengeCarNum () {
    //   // 得到localstorage中的值
    //   let getLocal = JSON.parse(window.localStorage.getItem('car'))
    //   // 如果为空等于一个[],避免为空foreach错误 ,往里push就直接是[{}]了
    //   getLocal || (getLocal = [])
    //   var counts = 0
    //   // 得到所有count值
    //   getLocal.forEach(item => {
    //     counts += item.count
    //   })
    //   this.$store.commit('initCarNum', counts)
    // },
    async getDitalImage() {
      let { data: res } = await this.$http.get(
        `api/getimageInfo/${this.$route.query.id}`
      );
      if (res.status !== 0)
        return this.$notify({
          type: "danger",
          message: "获取图片详情数据失败"
        });
      this.imageDital = res.message[0];
    },
    async getDitalImageList() {
      let { data: res } = await this.$http.get(
        `api/getthumimages/${this.$route.query.id}`
      );
      if (res.status !== 0)
        return this.$notify({
          type: "danger",
          message: "获取图片缩略图数组失败"
        });
      this.ditalImageList = res.message;
    },
    imageOnChange(index) {
      this.imageIndex = index;
    },
    imgPreview (id) {
      this.imageShow = true
      this.imageIndex = id
      // console.log(id)
    }
  },
  computed: {
    total() {
      return this.ditalImageList.length;
    },
    images() {
      const images = [];
      this.ditalImageList.forEach(i => {
        images.push(i.src);
      });
      return images;
    }
  },
  components: {
    'my-comments': Comment
  }
};
</script>

<style lang="less" scoped>
.info {
  padding: 0px 5px;
  margin-top: 66px;
  h4 {
    text-align: center;
    color: #26a2ff;
    font-size: 15px;
  }
  .time {
    float: left;
    font-size: 13px;
    color: #8f8f94;
  }
  .click {
    float: right;
    font-size: 13px;
    color: #8f8f94;
  }
  p {
    overflow: hidden;
  }
  hr {
    display: block;
  }
  ul {
    overflow: hidden;
    li {
      float: left;
      width: 33.3333%;
      padding: 5px;
      box-sizing: border-box;
    }
  }
  detail-content {
    display: block;
  }
}

</style>
